<template>
    <div class="box">
        <h1>刘九日</h1>
        <div class="father">
            <div class="child">child</div>
            <div class="bil">bil</div>
        </div>
        <div class="fa1 father">小日本</div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
// 定义变量
@miancolor: #c31d1d;

// 嵌套
// &代表的是紧邻的上一层元素
h1 {
    color: @miancolor;
}

.box {
    .father {
        &>div:nth-child(1) {
            background: @red;
            font-size: @white;
        }

        &.fa1 {
            background: yellow;
        }
    }

}

// .father {
//     .child {
//         color: blue;
//     }

//     .bil {
//         color: #c31d1d;
//     }
// }


// .father>div:nth-child(1) {
//     background: rgb(0, 30, 255);
// }
</style>